<!DOCTYPE html>
<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="jqgrid/css/layui.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/layui.js"></script> 
	<script src="js/province.js"></script> 
	<title>成盘电缆检测结果汇总统计工具登录</title>
	<style type="text/css">
.login-page {
	width: 360px;
	padding: 4% 0 0;
	margin: auto;
	position: absolute;
	left: 60%;
	top: 50%;
	margin-top: -200px; 

}
.form {
	position: relative;
	z-index: 1;
	background: #FFFFFF;
	max-width: 360px;
	margin: 0 auto 100px;
	padding: 45px;
	text-align: center;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
	font-family: "Roboto", sans-serif;
	outline: 0;
	background: #f2f2f2;
	width: 100%;
	border: 0;
	margin: 0 0 15px;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
}
.form button {
	font-family: "Microsoft YaHei", "Roboto", sans-serif;
	text-transform: uppercase;
	outline: 0;
	background: #12a9a0;
	width: 100%;
	border: 0;
	padding: 15px;
	color: #FFFFFF;
	font-size: 14px;
	-webkit-transition: all 0.3 ease;
	transition: all 0.3 ease;
	cursor: pointer;
	margin-top: 10px;
}
.form button:hover, .form button:active, .form button:focus {
	background: #009688;
}
.form .message {
	margin: 15px 0 0;
	color: #b3b3b3;
	font-size: 12px;
}
.form .message a {
	color: #009688;
	text-decoration: none;
}
.form .register-form {
	display: none;
}
.container {
	position: relative;
	z-index: 1;
	max-width: 300px;
	margin: 0 auto;
}
.container:before, .container:after {
	content: "";
	display: block;
	clear: both;
}
.container .info {
	margin: 50px auto;
	text-align: center;
}
.container .info h1 {
	margin: 0 0 15px;
	padding: 0;
	font-size: 36px;
	font-weight: 300;
	color: #1a1a1a;
}
.container .info span {
	color: #4d4d4d;
	font-size: 12px;
}
.container .info span a {
	color: #000000;
	text-decoration: none;
}
.container .info span .fa {
	color: #EF3B3A;
}
body {
	background: #009688; /* fallback for old browsers */
	/* background: -webkit-linear-gradient(right, #2087df, #2087df);
	background: -moz-linear-gradient(right, #76b852, #8DC26F);
	background: -o-linear-gradient(right, #76b852, #8DC26F);
	background: linear-gradient(to left, #76b852, #8DC26F); */
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	    text-align: center;
    width: 100vw;
    height: 100vh;
}
.shake_effect {
	-webkit-animation-name: shake;
	animation-name: shake;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}
 @-webkit-keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
}
 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
}
}
 @keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
}
 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
}
}
p.center {
	color: #fff;
	font-family: "Microsoft YaHei";
}
.logo{
	color: #fff;
	font-size: 30px;
	margin-top: 5%;
	text-align: center;
}
.error-s{
	color: #EF3B3A;
	display: none;
	font-size: 12px;

}
.wrap{
	background: url('jqgrid/img/bg.png') no-repeat;
	width: 100%;
    height: 100%;
    background-size: cover;
}
.appheader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    /*padding-left: 150px;*/
    background: white;

}
.flex_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.appheader .subject {
    height: 10vh;
    line-height: 10vh;
    font-size: 30px;
    font-weight: bold;
    color: #10aaa1;
    margin-left:6%;
}
.title-s{
	margin-bottom: 30px;
	color: #12a9a0;
	font-size: 20px;
}
.layui-form-select dl{
	top: 42px!important;
	bottom: auto!important;
}
</style>
	</head>
	<body>
		<div class="wrap">
			<div data-v-6ad6b886="" class="appheader flex_left"><div data-v-6ad6b886="" class="logo"></div><div data-v-6ad6b886="" class="subject">成盘电缆检测结果汇总统计工具</div></div>
			
<div id="wrapper" class="login-page">


		<div id="login_form" class="form">
				<div class="title-s">
		用户登录
	</div>
		<!-- <form class="register-form">
				<input type="text" placeholder="用户名" id="account"/>
				<input type="password" placeholder="密码" id="r_password" />
				<input type="text" placeholder="电子邮件" id="r_emial"/>
				<button id="create">创建账户</button>
				<p class="message">已经有了一个账户? <a href="#">立刻登录</a></p>
			</form> -->
		<form class="login-form layui-form">
				<!-- <input type="text" placeholder="用户名" id="account"/> -->
				<div class="layui-form-item">
				<select name="" id="account" class="loginprovince"></select>
				</div>
				
				<input type="password" placeholder="密码" id="password"/>
				<span class="error-s"></span>
				<button id="login">登　录</button>
			</form>
	</div>
	</div>
		</div>

	<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
layui.use(['form'], function () {
    var form = layui.form;
});
	function check_login()
	{
	 var name=$("#account").val();
	 var pass=$("#password").val();
	 var userdata={}
	 userdata.provincename=name
	 userdata.password=pass
	 console.log('userdata')
	 console.log(userdata)
	 if(name!==''&&pass!==''){
		//http://localhost:8888/chx/user/findLoginUser
		// http://173.82.131.10:4999/web/#/5?page_id=32
		console.log(userdata)
		$.ajax({
			contentType: 'application/json',
			type:'POST',
			// dataType:'jsonp',
			url:"http://localhost:8888/chx/user/findLoginUser",
			data:JSON.stringify(userdata),
			success:function(res){
			if(res.code==200&&res.success==true){
				// 登录成功之后的操作
				var thisurl=res.data
				window.location.href =  '/chx/' + thisurl;

			}else{
				// 登陆失败
				// alert(res.msg)
				$('.error-s').show()
				$('.error-s').html(res.msg)
				  $("#login_form").removeClass('shake_effect');  
					setTimeout(function()
					{
					$("#login_form").addClass('shake_effect')
					},1);
			}
			}
		})

		// $.ajax({ 
		// 	url:"http://localhost:8888/chx/user/findLoginUser",
		// 	data:JSON.stringify(userdata), 
		// 	type:'post', 
		// 	dataType:'json', 
		// 	headers:{ 
		// 	Accept:"application/json", 
		// 	"Content-Type":"application/json"
		// 	}, 
		// 	processData:false, 
		// 	cache:false
		// 	}).done(function (data) { 
		// }); 

		
	 }
          
	//  if(name=="admin" && pass=="admin")
	//  {
	//   alert("登录成功！");
	//   $("#user_name").val("");
	//   $("#password").val("");

	//  }
	//  else
	//  {
	//   $("#login_form").removeClass('shake_effect');  
	//   setTimeout(function()
	//   {
	//    $("#login_form").addClass('shake_effect')
	//   },1);  
	//  }
	}
	$(function(){
		$("#create").click(function(){
			check_register();
			return false;
		})
		$("#login").click(function(){
			if($(this).hasClass('ing')){
			return false;
				
			}else{
			check_login();
			return false;
			}
			
		})
		$('.message a').click(function () {
		    $('form').animate({
		        height: 'toggle',
		        opacity: 'toggle'
		    }, 'slow');
		});
	})
	</script>
</body>
</html>